<template>
  <!-- 档案换盒 -->
  <div>
    <el-card class="box-card" :body-style="{ padding: '10px 10px 2px 10px' }">
      <el-form :inline="true" :model="queryParam" class="demo-form-inline" size="medium">
        <el-form-item label="档号/题名">
          <el-input v-model="queryParam.archiveNoOrName" placeholder="请输入档号或题名" clearable></el-input>
        </el-form-item>
        <el-form-item label="盒号">
          <el-input v-model="queryParam.boxNo" placeholder="请输入盒号" clearable></el-input>
        </el-form-item>
        <el-form-item label="上架状态">
          <el-select v-model="queryParam.stageStatus" placeholder="请选择" clearable>
            <el-option v-for="item in [
              { value: 1, label: '已上架' },
              { value: 2, label: '已下架' },
            ]" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否已装盒">
          <el-select v-model="queryParam.boxingFlag" placeholder="请选择" clearable>
            <el-option v-for="item in [
              { value: 0, label: '是' },
              { value: 1, label: '否' },
            ]" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="boxReplace">换盒</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="unboxing">拆盒</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleBoxing">装盒</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }">
      <el-table :data="tableData" border style="width: 100%" height="55vh" ref="table"
        @selection-change="selectionChange">
        <el-table-column type="selection" width="55" align="center" sortable> </el-table-column>
        <el-table-column v-for="item of tableProps" :key="item.props" :prop="item.prop" :label="item.title"
          :width="item.width" :show-overflow-tooltip="true">
          <template #default="scope">
            <span v-if="item.prop === 'boxNo'">
              <el-link v-if="scope.row.boxNo" type="primary" :underline="false" style="font-size: 12px"
                @click="archivesByBoxNo(scope.row)">
                {{ scope.row[item.prop] }}
              </el-link>
              <span v-else>无</span>
            </span>
            <span v-else-if="item.prop === 'stageStatus'">
              <el-tag v-if="scope.row.stageStatus == 0">未上架</el-tag>
              <el-tag v-if="scope.row.stageStatus == 1" type="success">已上架</el-tag>
              <el-tag v-if="scope.row.stageStatus == 2" type="danger">已下架</el-tag>
            </span>
            <span v-else-if="item.prop === 'storeStatus'">
              <el-tag :type="statusInfo(scope.row).type">
                {{ statusInfo(scope.row).text }}
              </el-tag>
            </span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }">
      <pagination ref="pagination" :totalCount="totalCount" @pagination="pagination"></pagination>
    </el-card>
    <archives-by-box-no ref="archivesByBoxNo"></archives-by-box-no>
    <box-replace-dialog ref="boxReplaceDialog" @ok="loadData"></box-replace-dialog>
    <boxing-dialog ref="boxingDialog" @ok="loadData"></boxing-dialog>
  </div>
</template>

<script>
import { batchDel, boxReplacePage } from '@/api/rfid/label'
import { addUnboxing } from '@/api/rfid/boxReplace'
import archivesByBoxNo from './dialog/archivesByBoxNo.vue'
import boxReplaceDialog from './dialog/boxReplaceDialog.vue'
import boxingDialog from './dialog/boxingDialog.vue'
export default {
  name: 'boxReplace',
  components: { archivesByBoxNo, boxReplaceDialog, boxingDialog },
  data() {
    return {
      totalCount: 0, //总数
      //查询条件
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      queryParam: {},
      tableData: [],
      tableProps: [
        { title: '档号', prop: 'archiveNo', width: '', checked: true },
        { title: '盒号', prop: 'boxNo', width: '', checked: true },
        { title: '题名', prop: 'archiveName', width: '', checked: true },
        { title: 'RFID', prop: 'rfid', width: '', checked: true },
        { title: '上架状态', prop: 'stageStatus', width: '', checked: true },
        { title: '在库状态', prop: 'storeStatus', width: '', checked: true },
        { title: '页数', prop: 'pageNo', width: '90', checked: true },
        { title: '存放位置', prop: 'positionId_dictText', width: '', checked: true },
      ],
      selectionData: [],
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    statusInfo(row) {
      if (row.storeStatus === 0) return { type: '', text: '未入库' }
      if (row.storeStatus === 1) {
        return row.stageStatus === 1
          ? { type: 'success', text: '在库' }
          : { type: 'warning', text: '暂存' }
      }
      if (row.storeStatus === 2) return { type: 'danger', text: '离库' }
      return { type: '', text: '' }
    },
    onSubmit() {
      this.$refs.pagination.resetPagination()
    },
    reset() {
      this.queryParam = {}
      this.$refs.pagination.resetPagination()
    },
    boxReplace() {
      if (this.selectionData.length === 0) {
        this.$message.warning('请选择要换盒的档案')
        return
      }
      // 盒号为null的不允许换盒
      if (this.selectionData.some((item) => item.boxNo == null)) {
        this.$message.warning('已选择档案中存在未装盒的档案，请重新选择')
        return
      }
      this.$refs.boxReplaceDialog.add(this.selectionData)
    },
    unboxing() {
      if (this.selectionData.length === 0) {
        this.$message.warning('请选择要拆盒的档案')
        return
      }
      // 盒号为null的不允许拆盒
      if (this.selectionData.some((item) => item.boxNo == null)) {
        this.$message.warning('已选择档案中存在未装盒的档案，请重新选择')
        return
      }
      this.$confirm('此操作将选中的档案拆盒, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          addUnboxing(this.selectionData).then((res) => {
            if (res.data.code === 200) {
              this.$message.success('拆盒成功')
              this.loadData()
            } else {
              this.$message.error(res.data.message)
            }
          })
        })
        .catch((error) => {
          if (error === 'cancel') {
            // 用户点击了取消按钮，可以在此处添加相应处理逻辑
          } else {
            // 其他错误情况，例如网络错误等
            this.$message.error(error)
          }
        })
    },
    // 装盒
    handleBoxing() {
      if (this.selectionData.length === 0) {
        this.$message.warning('请选择要装盒的档案')
        return
      }
      // 已有盒号的档案不能再装盒
      if (this.selectionData.some((item) => item.boxNo)) {
        this.$message.warning('已选择档案中存在已装盒的档案，请重新选择')
        return
      }
      this.$refs.boxingDialog.add(this.selectionData)
    },
    selectionChange(val) {
      this.selectionData = val
    },
    pagination(val) {
      this.searchModel.pageNo = val.page
      this.searchModel.pageSize = val.limit
      this.loadData()
    },
    loadData() {
      const param = Object.assign(this.queryParam, this.searchModel)
      boxReplacePage(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.records
            this.totalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    archivesByBoxNo(row) {
      this.$refs.archivesByBoxNo.init(row)
    },
  },
}
</script>

<style scoped></style>
